<div class="favorite-wrap" id="productWrap">
    <div class="favorite-wrap__inner" id="favoriteProduct">
    </div>

    <div class="wrap-footer">
        <div class="wrap-footer-label" id="productViewMore"><span>View More</span></div>
    </div>

</div>

<script type="module">
    import { getGridList, collectAction } from "/static/js/common.js";

    const productParams = {
        pageSize: 12,
        page: 1
    }
    init()
    function init(){
        getProductList()
        initProductView()
    }
    function initProductView(){
        const vierwMoreEle = document.getElementById('productViewMore')
        vierwMoreEle.addEventListener('click', throttle(() => {
            productParams.page ++
            getProductList()
        },1000))
    }

    function getProductList(){
        const wrap = document.getElementById('productWrap')
        const footer = wrap.querySelector('.wrap-footer-label')
        getGridList({
            loadingElement: wrap,
            url: '/ins/fa/product',
            params: productParams,
            listWrap: wrap.querySelector('.favorite-wrap__inner'),
            footerElement: footer,
            listDomFunc: item => {
                let str = ''
                str += '<a href="/instagram/product/' + item.productId + '" >'
                str += '<div class="favorite-item">' +
                    '<div class="top">' +
                    '<div class="avatar">' +
                    '<img class="favorite-product-avatar" src="' + getImage(item.image,IMAGE_TYPE.PRODUCT,IMAGE_SIZE.SMALL) + '" alt="' + item.productId + '">'
                str += '</div>' +
                    '<div class="user-info">' +
                    '<div class="title">' +
                    '<div class="title__inner favorite-inner">' + item.productName + '</div>' +
                    '</div>' +
                    '<div class="title_bottom">' +
                    '<div class="product-price">' + item.price + '</div>' +
                    '</div>' +
                    '</div>'
                str += '<div class="gd-popover"'
                if (!gugeeGobal.isMobile) {
                    str += ' content="Remove from Favorite"'
                }
                str += '>' +
                    '<div class="favorite-icon" data-id="' + item.productId + '"  data-favorite="1" data-fid="' + item.fid + '">' +
                    '<i class="iconfont iconquxiaoshoucang33"></i>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="bottom">' +
                    '<div class="data-item">' +
                    '<div class="label">Influencer</div>' +
                    '<div class="num">' + numFormat(+item.influencer) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Post</div>' +
                    '<div class="num">' + numFormat(+item.mediaCount) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Engagements</div>' +
                    '<div class="num">' + numFormat(+item.engagements) + '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</a>'
                return str
            },
            otherEvent: () => {
                initPopover()
                document.querySelectorAll('#favoriteProduct .favorite-icon').forEach(item => {
                    item.addEventListener('click', e => {
                        e.preventDefault()
                        collectAction({
                            element: item,
                            url: '/ins/fa/product',
                            collectKey: 'pid'
                        })
                    })
                })
            }
        })
    }
    

</script>
